<template>
	<!-- title部分 -->
	<view class="title">
		<view class="title_leftbox" @click="goToWode">
			<image class="title_leftbox_image_fanhui" src="../../static/返回.png"></image>
		</view>
		<view class="title_middlebox">
			<view class="title_middlebox_text">充值</view>

		</view>
		<view class="title_rightbox">
			<!-- <image class="title_rightbox_img" src="../../static/zhuanfa.png" @click="showzhezhao"></image> -->
		</view>
	</view>

	<!-- jineyemian -->
	<view class="chongzhi">
		<view class="chongzhi_diyibufenbox">
			<view class="chongzhi_diyibufenbox_text">1元</view>
			<view class="chongzhi_diyibufenbox_text">60元</view>
			<view class="chongzhi_diyibufenbox_text">80元</view>
			<view class="chongzhi_diyibufenbox_text">120元</view>
			<view class="chongzhi_diyibufenbox_text">240元</view>
			<view class="chongzhi_diyibufenbox_text">500元</view>
		</view>
		<view class="chongzhi_dierbufenbox">
			<view class="chongzhi_dierbufenbox_leftbox">
				<view class="chongzhi_dierbufenbox_leftbox_text1">输入金额:</view>
				<input type="text" class="chongzhi_dierbufenbox_leftbox_text2" placeholder=" 非整百金额可享优先到账">
			</view>

			<view class="chongzhi_dierbufenbox_rightbox">
				<view class="chongzhi_dierbufenbox_rightbox_text1">立即支付</view>
			</view>
		</view>

		<view class="chongzhi_disanbufenbox">
			<view class="chongzhi_disanbufenbox_text1">请选择支付方式(若充值不了,请点击</view>
			<view class="chongzhi_disanbufenbox_text2">切换服务器</view>
			<view class="chongzhi_disanbufenbox_text1">)</view>
		</view>
	</view>
	<!-- 温馨提示部分 -->
	<view class="wenxintishibox">
		<view class="wenxintishibox_diyibufen">
			<view class="wenxintishibox_diyibufen_text1">温馨提示</view>
			<view class="wenxintishibox_diyibufen_text2">1、支付宝首次支付时会获取位置权限，拒绝会导致无法调起支付，如果勾选了“下次不再提示”的选项会导致永远无法使用支付。</view>
			<view class="wenxintishibox_diyibufen_text2">2、充值金额不可提现，只能用于购彩，中奖金额可以提现。</view>
		</view>
		<view class="wenxintishibox_dierbufen">
			<view class="wenxintishibox_dierbufen_text1">如有疑问可联系</view>
			<view class="wenxintishibox_dierbufen_text2">在线客服</view>
			<view class="wenxintishibox_dierbufen_text1">咨询解决。</view>
			<view class="wenxintishibox_dierbufen_imgbox">
				<image class="wenxintishibox_dierbufen_imgbox_img" src="../../static/yuanxingxuanzhong.png"></image>
			</view>
			<view class="wenxintishibox_dierbufen_text2">我已成年，</view>
			<view class="wenxintishibox_dierbufen_text1">已阅读并同意</view>
			<view class="wenxintishibox_dierbufen_text2">《用户协议及</view>
			<view class="wenxintishibox_dierbufen_text2">法律声明》</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			goToWode() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.switchTab({
					url: '/pages/wode/wode', // 我的路径
				});
			},
		}
	}
</script>
<style>
	page{
		background: #eeeeee;
	}
	/* 以下是title部分样式 */
	.title {
		background-color: rgb(226, 50, 52);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 2%;
	}

	.title_leftbox {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title_leftbox_image_fanhui {
		width: 24px;
		height: 24px;
	}

	.title_middlebox {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title_middlebox_text {
		font-size: 18px;
		color: white;
	}

	.title_rightbox {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* .title_rightbox_img {
  width: 18px;
  height: 18px;
} */

	/* 充值部分样式 */
	.chongzhi {
		background-color: white;
		padding: 2%;
	}

	.chongzhi_diyibufenbox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.chongzhi_diyibufenbox_text {
		padding: 3% 0%;
		border: 1px solid;
		flex-basis: calc(30% - 4px);
		text-align: center;
		margin-bottom: 12px;
		font-size: 15px;
		color: red;
		border-radius: 3px;
		font-weight: 600;
	}

	/* 充值的第二部分 */
	.chongzhi_dierbufenbox {
		display: flex;
		

	}

	.chongzhi_dierbufenbox_leftbox {
		display: flex;
		width: 66%;
		padding: 1%;
		border: 1px solid #eaeaea;
		margin-right: 2%;
	}

	.chongzhi_dierbufenbox_leftbox_text1 {
		color: #333;
		font-size: 10px;
		display: flex;
		align-items: center;
		margin-right: 2px;
	}

	.chongzhi_dierbufenbox_leftbox_text2 {
		font-size: 10px;
	}

	.chongzhi_dierbufenbox_rightbox {
		width: 30%;
		color: #fff;
		border-color: #f90;
		background-color: #f90;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 5px;
	}

	.chongzhi_dierbufenbox_rightbox_text1 {
		font-size: 13px;
	}

	.chongzhi_disanbufenbox {
		display: flex;
	}

	.chongzhi_disanbufenbox_text1 {
		font-size: 12px;
	}

	.chongzhi_disanbufenbox_text2 {
		color: rgb(226, 50, 52);
		font-weight: 500;
		font-size: 12px;
	}

	/* 温馨提示部分 */
	.wenxintishibox{
		padding: 2%;
	}
	.wenxintishibox_diyibufen{
		margin-bottom: 15px;
	}
	.wenxintishibox_diyibufen_text1{
		font-size: 12px;
		margin-bottom: 10px;
	}
	.wenxintishibox_diyibufen_text2{
		font-size: 12px;
		color: rgb(226, 50, 52);
	}
	.wenxintishibox_dierbufen{
		    display: flex;
		    align-items: center;
		    /* flex-wrap: wrap-reverse; */
		    flex-wrap: wrap;
	}
	.wenxintishibox_dierbufen_imgbox{
		
	}
	
	.wenxintishibox_dierbufen_imgbox_img{
		display: block;
		width: 10px;
		height: 10px;
	}
	.wenxintishibox_dierbufen_text1{
		font-size: 10px;
		color: #333;
	}
	.wenxintishibox_dierbufen_text2{
		font-size: 10px;
		color: rgb(226, 50, 52);
	}
	</style>
